<template>
  <div class="modal"
       v-if="visibleBack"
       @click.stop="cancel">
    <transition name="mk-picker-fade">
      <div class="mk-picker">
        <transition name="mk-picker-move">
          <div class="mk-picker-panel"
               v-show="isVisible"
               @click.stop>
            <div class="mk-picker-choose border-bottom-1px">
              <span class="cancel"
                    @click="cancel">取消</span>
              <span class="confirm"
                    @click="confirm">确定</span>
              <!-- <h1>请选择省市区</h1> -->
            </div>
            <div class="mk-picker-content">
              <addressPicker @pickerPause="pickerPause"
                             :provincename="provincename"
                             :cityname="cityname"
                             :areaname="areaname"
                             :defaultValue="defaultValue"></addressPicker>
            </div>
            <div class="mk-picker-footer"></div>
          </div>
        </transition>
      </div>

    </transition>
  </div>
</template>
<style lang="stylus">
.modal {
  position: fixed;
  top: 0;
  z-index: 300;
  left: 0;
  right: 0;
  bottom: 0;
  background: RGBA(0, 0, 0, 0.5);
}

.mk-picker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mk-picker-fade-enter, .mk-picker-fade-leave-active {
  opacity: 0;
}

.mk-picker-fade-enter-active, .mk-picker-fade-leave-active {
  transition: all 0.3s ease-in-out;
}

.mk-picker-panel {
  text-align: center;
  font-size: 14px;
  background: #fff;
}

// .mk-picker-move-enter {
// transform: translate3d(0, -500px, 0);
// }

// .mk-picker-move-enter {
// transition: all 0.3s ease-in-out;
// }
.mk-picker-move-leave-active {
  transform: translate3d(0, 500px, 0);
}

.mk-picker-move-leave-active {
  transition: all 0.3s ease-in-out;
}

.mk-picker-move-enter-active {
  transform: translate3d(100px, -500px, 0);
}

.mk-picker-move-enter-active {
  transition: all 1s ease-in-out;
}

.mk-picker-choose {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: RGBA(174, 42, 38, 1);

  span {
    position: absolute;
    top: 6px;
    padding: 16px 16px;
    font-size: 32px;
  }

  .confirm {
    right: 0;
    color: white;
  }

  .cancel {
    left: 0;
    color: white;
  }

  h1 {
    padding-top: 6px;
    line-height: 60px;
    text-align: center;
    font-weight: normal;
    font-size: 32px;
    color: white;
  }
}

.mk-picker-footer {
  height: 20px;
}

.clear-fix:after {
  content: '';
  display: table;
  clear: both;
}

.border-bottom-1px, .border-top-1px {
  position: relative;
}

.border-bottom-1px:after, .border-bottom-1px:before, .border-top-1px:after, .border-top-1px:before {
  content: '';
  display: block;
  position: absolute;
  transform-origin: 0 0;
}

.border-top-1px:before {
  border-top: 1px solid #ebebeb;
  left: 0;
  top: 0;
  width: 100%;
  transform-origin: 0 top;
}

.border-bottom-1px:after {
  border-bottom: 1px solid #ebebeb;
  left: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 0 bottom;
}
</style>
<script>
import addressPicker from './address-picker'

export default {
  name: 'mk-picker',
  props: {
    isVisible: false,
    defaultValue: {},
    provincename: '',
    cityname: '',
    areaname: ''
  },
  data () {
    return {
      visibleBack: false,
      pValue: {
        provincecode: '', // 省份
        provincename: '',
        citycode: '', // 市
        cityname: '',
        areacode: '', // 区
        areaname: ''
      }
    }
  },
  methods: {
    // 停止滑动后，保存当前选中值
    pickerPause (province, city, area) {
      if (!province) {
        return
      }
      this.pValue.provincecode = province.value
      this.pValue.provincename = province.label
      this.pValue.citycode = city.value
      this.pValue.cityname = city.label
      this.pValue.areacode = area.value
      this.pValue.areaname = area.label
    },
    // 点击确认按钮后，提交当前值到父类
    confirm () {
      // this.isVisible = false
      this.$emit('operaDialog', false, this.pValue)
    },
    // 取消按钮点击后，只关闭
    cancel () {
      // this.isVisible = false
      this.$emit('operaDialog', false)
    }
  },
  watch: {
    isVisible (data) {
      let self = this
      if (data) {
        self.visibleBack = true
      } else {
        setTimeout(function () {
          self.visibleBack = false
        }, 300)
      }
    }
  },
  components: {
    addressPicker
  }
}
</script>
